<template>
  <!-- 普通用户个人主页 -->
  <view class="pages m-h-100 bg-co-f6 p-b-30">
    <view
      class="h_header"
      :style="{ backgroundImage: `url(${background})`, height: 527 + statusHeight + 'rpx' }"
    >
      <view
        :style="{
          height: statusHeight + 'rpx',
          background: 'transparent',
        }"
      >
      </view>
      <view class="header_top">
        <view class="left" @click="toBack">
          <u-icon name="arrow-left" size="20" color="#fff" style="margin-right: 5rpx"></u-icon>
        </view>
        <view class="user">个人主页</view>
        <view
          class="right_share flex-column-row-start"
          :style="{ marginLeft: is_self ? '43rpx' : '225rpx' }"
          @click="toDetail"
        >
          <image style="width: 31rpx; height: 31rpx" src="@/static/my/share.png" />
          <view class="co-white" style="font-size: 24rpx">分享</view>
        </view>
      </view>
    </view>

    <!--  -->
    <view class="w-702 bor-radius-16 card mar-0-auto p-b-30 flex-column-between p-l-24 p-r-24">
      <view class="header w-100 flex-row-between">
        <image
          :src="
            userInfo?.avatar ||
            'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
          "
          class="bor-radius-50 bg-co-ee"
        />
        <view class="flex-1 mar-l-24 f-s-30 co-white">
          <view class="tagContent h-flex-column">
            <view class="nickName flex-row-start">
              <view class="mar-r-10 u-line-1 name">{{ userInfo?.nickname }}</view>
              <view class="flex-row-start">
                <image
                  v-if="tagInfo.identity_type == 2"
                  style="width: 32rpx; height: 32rpx"
                  src="@/static/my/sex-man.png"
                ></image>
                <image
                  v-if="tagInfo.identity_type == 1"
                  style="width: 32rpx; height: 32rpx"
                  src="@/static/my/sex-woman.png"
                ></image>
                <image
                  v-if="tagInfo.identity_type == 3"
                  style="width: 32rpx; height: 32rpx"
                  src="@/static/my/relatives.png"
                ></image>
              </view>
            </view>
            <view class="middle_tag">
              {{ tagInfo?.tag }}
            </view>
          </view>
        </view>
      </view>
      <view class="h-flex w-100 flex-row-start" v-if="userInfo?.province">
        <view class="mar-r-80">
          <view class="co-white f-s-28">IP归属地：{{ userInfo?.province }}</view>
        </view>
      </view>
      <view class="h-flex w-100 flex-row-start">
        <view class="sign h-flex">
          <view class="co-white f-s-28 autograph">{{
            userInfo?.autograph || '他很神秘等你自己来发现～'
          }}</view>
        </view>
      </view>
      <view class="h-flex w-702 mar-0-auto">
        <view class="h-flex" style="width: 500rpx">
          <view
            class="flex-column-between mar-r-80"
            @click="navigateTos('/pages-users/my-like/index?current=0')"
          >
            <view class="f-s-30 co-white l-h-1">{{ userInfo?.followCount || '0' }}</view>
            <view class="co-white f-s-28">关注</view>
          </view>
          <view
            class="flex-column-between mar-r-80"
            @click="navigateTos('/pages-users/my-like/index?current=1')"
          >
            <view class="f-s-30 co-white l-h-1">{{ userInfo?.fansCount || '0' }}</view>
            <view class="co-white f-s-28">粉丝</view>
          </view>
        </view>

        <view class="btn-sure" v-if="!is_self" @click="follow">
          {{ userInfo?.isFollow ? '取消关注' : '关注' }}
        </view>
      </view>
    </view>
    <view class="mar-0-auto bg-co-white week-tabsb" :style="{ top: 0 + 'rpx' }">
      <view
        v-show="isSrollTop > 527"
        :style="{
          height: statusHeight + 'rpx',
          background: isSrollTop > 527 ? '#fff' : 'transparent',
        }"
        style="transition: all 0.3"
      >
      </view>
      <u-tabs
        class="tabs-container"
        itemStyle="height:60rpx;"
        lineWidth="40rpx"
        lineHeight="7rpx"
        lineColor="#FFB300"
        :inactiveStyle="{ color: '#999999', transform: 'scale(1)' }"
        :activeStyle="{ color: '#333333', fontWeight: 'bold' }"
        :list="tabs"
        :current="current_tab"
        @click="tabClick"
        :scrollable="false"
      ></u-tabs>
    </view>
    <view class="list-content mar-0-auto">
      <view class="none" v-if="(!dynamicList || !dynamicList.length) && !is_self">
        <!-- <image src="@/static/my/none.png"></image> -->
        <view class="none_text">这里什么都没有哦！</view>
      </view>
      <view v-else>
        <view v-show="current_tab === 0" class="content-4">
          <h-hot-list
            :changeDelIcon="changeDelIcon"
            :delShow="true"
            :isShowShare="true"
            :isShowView="false"
            @toLogin="showLogin"
            @updateList="updateListDy"
            @share="share"
            :list="dynamicList"
            @itemTap="gotoDetail"
            v-if="dynamicList && dynamicList?.length"
          ></h-hot-list>
          <h-loading :show="showDyLoading" :showMore="dynamicList.length"></h-loading>
        </view>
      </view>
    </view>
  </view>
  <h-login top="50" ref="login"></h-login>
  <!-- 分享 -->
  <h-share ref="shareRef" :showLh="showLh" :otherType="otherType"></h-share>
  <!-- 个人主页分享拉黑 -->
  <u-popup :show="laheiOtShow" mode="center" @close="closeLafeiOt" :round="10" bgColor="#F6F6F6">
    <view class="fen_box_1">
      <view class="fen_box-content">
        对方将无法查看你的动态，也无法与你互动，对方不会收到被拉黑的通知
      </view>
      <view class="fen_box_btn">
        <view class="btn_cancle" @click="laheiOtShow = false">取消</view>
        <view class="btn_sure" @click="laheiSure">拉黑</view>
      </view>
    </view>
  </u-popup>
  <!-- 拉黑 -->
  <u-popup
    :show="laheiShow"
    mode="bottom"
    @close="closeLafei"
    :round="10"
    :closeable="true"
    bgColor="#F6F6F6"
  >
    <view>
      <view class="fen_box">
        <view class="fen_box_cen">
          <view class="lh_box_cen_l" @click.stop="negativeFeedback(1)">
            <image
              src="https://ossresource.miyingbl.com/uploads/20240307/f6b32f7b63ee1ecc427102897e0cde2c.png"
              class="fen_box_cen_l_img"
            ></image>
            <view class="fen_box_cen_l_te">不感兴趣</view>
          </view>
          <view class="lh_box_cen_l" @click.stop="defriend()">
            <image
              src="https://ossresource.miyingbl.com/uploads/20240307/5210aee89f7a4118171e4be748182b1f.png"
              class="fen_box_cen_l_img"
            ></image>
            <view class="fen_box_cen_l_te">不喜欢作者</view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
  <h-authpup
    ref="authpup"
    :h="systemInfo.statusHeight"
    type="top"
    @changeAuth="changeAuth"
    permissionID="CAMERA"
  ></h-authpup>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, nextTick } from 'vue'
import bus from '@/utils/bus'
import { onLoad, onReachBottom, onShow, onReady, onPageScroll } from '@dcloudio/uni-app'
import { showToast, navigateTo, navigateBack, formatDate } from '@/utils'
import { useMemberStore, useSystemStore } from '@/stores'
import { getUserInfoApi } from '@/services/my/login/index'
import { getUserIdentityTageApi, gethomepagePopularApi } from '@/services/my/user'
import { followUserApi, articleLstApi } from '@/api/social'
import { otherofficialInfo } from '@/api/home'
import { getTrendsInfo } from '@/api/trends'
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
import { uploadApi } from '@/utils/upLoad'
import { editUserApi } from '@/services/my/user'
const { proxy } = getCurrentInstance()
let store = useMemberStore()
const otherType = ref(true)
const shareRef = ref(null)
const showLh = ref(false)
const laheiOtShow = ref(false)
const laheiOt = ref(false)
const delShowLike = ref(false)
const delShowDy = ref(true)
const tops = ref(0)
const isShowShare = ref(true)
const showDyLoading = ref<boolean>(false) // 是否显示加载中
const userInfo = ref<any>({}) // 用户信息
const tagInfo = ref<any>({}) //标签信息
const current_tab = ref<number>(0)
const equipment = ref('')
const otherUid = ref('')
const dynamicList = ref([]) // 动态列表
const systemInfo = useSystemStore()
const dynamicParams = ref<any>({
  // 动态参数
  page: 1,
  limit: 20,
  uid: '',
})
const detail = ref({})
const uid = ref()
const is_self = ref(false)
const current = ref<number>(0) // tab索引
const flag = ref(0) // true 自己的 false 别人的
const tabs = ref([{ name: '动态' }, { name: '赞过' }])
const last_page = ref(0) // 动态是否最后一页
const login = ref(null)
const changeDelIcon = ref(true)
const isShow = ref(false)
const finishedDy = ref(false)
const background = ref('')
const laheiShow = ref(false)
const token = ref(null)
function share(row) {
  if (!store.token) {
    login.value.open()
    return
  } else {
    if (row.content_type == 'kp') {
      row.path = `baby/science/index?id=${row.id}`
      row.imageUrl =
        row?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
    } else {
      row.summary = row?.content
      row.imageUrl =
        row?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
      row.path = `socials/detail/index?id=${row.id}`
    }
    showLh.value = true
    otherType.value = false
    row.path =
      row.content_type == 'dt'
        ? `socials/detail/index?id=${row.id}`
        : `baby/science/index?id=${row.id}`
    console.log('row', row)

    shareRef.value.open(row)
  }
}

/**
 * 进别人的主页，需要带uid过来
 */
const isDtOrKp = ref()
const url = ref()
const detailInfo = ref<any>({})
onLoad((options: any) => {
  const userStore = useMemberStore()
  console.log('options', options)

  uid.value = userStore?.userInfo?.user?.uid
  if (options.uid && options.uid == uid.value) {
    dynamicParams.value.uid = userStore?.userInfo?.user?.uid || ''
    userInfo.value = userStore?.userInfo || {}
    flag.value = 1
    isShow.value = false
    is_self.value = true

    getUserHomepage()
    uni.$on('getRefresh', (data) => {
      finishedDy.value = false
      refreshData()
    })
    uni.$on('update_num', (data) => {
      finished.value = false
      refreshData()
    })
    uni.$on('view_num', (data) => {
      refreshData()
    })
    uni.$on('updateUserInfo', (data) => {
      dynamicList.value = []
      getUserHomepage()
    })
    detail.value = userInfo.value.user
    detailInfo.value.uid = options.uid
    console.log('个人的')
  } else if (options.uid && options.uid != uid.value) {
    isDtOrKp.value = options?.type
    if (options?.type == 'kp') {
      tabs.value = [{ name: '科普' }]
      url.value = 'blapp/v1/user/homepagePopular'
    } else {
      tabs.value = [{ name: '动态' }]
      url.value = 'blapp/v1/user/homepageUpdates'
    }
    dynamicParams.value.uid = options.uid || ''
    flag.value = 0
    isShow.value = false
    delShowDy.value = false
    isShowShare.value = false
    changeDelIcon.value = false
    is_self.value = false
    otherUid.value = options.uid
    getUserSpace()
    getUserHomepage()
    uni.$on('view_num', (data) => {
      gethomepagePopular()
    })
    detailInfo.value.uid = options.uid

    console.log('他人的', background.value)
  }
  addListener()
})
onShow(() => {
  const userStore = useMemberStore()
  token.value = userStore?.token
  getUserIdentityTage()
})
var dyId = ref('')
const closeLafei = () => {
  laheiShow.value = false
}
const closeLafeiOt = () => {
  laheiOtShow.value = false
}
function navigateTos(url: string) {
  if (flag.value < 1) return
  navigateTo(url)
}
// 刷新广场列表
function refreshData() {
  dynamicParams.value.page = 1
  dynamicList.value = []
  likeList.value = []
  if (current_tab.value == 0) {
    getUserHomepage()
  }
}
/**
 * 显示登录
 */
function showLogin() {
  nextTick(() => {
    login.value.open()
  })
}
// 关注
async function follow() {
  try {
    const res: any = await followUserApi({
      to_uid: userInfo?.value.uid,
    })
    showToast(res.message)
    getUserSpace()
  } catch (error) {
    console.log(error)
  }
}
// 获取他人个人主页信息
async function getUserSpace() {
  const res: any = await otherofficialInfo({ uid: otherUid.value })
  userInfo.value = res.data.detail
  background.value = res.data?.center?.user?.background
    ? res.data?.center?.user?.background
    : 'https://ossresource.miyingbl.com/uploads/20240401/h-bl-app/1711961861361'
}
// 获取动态列表

async function getUserHomepage() {
  const userStore = useMemberStore()
  const system = useSystemStore()

  if (finishedDy.value) return
  // #ifdef H5
  equipment.value = 'h5'
  // #endif
  let p = {
    limit: 10,
    page: 1,
    type: isDtOrKp.value == 'kp' ? 2 : 1,
    status: 1,
    doctor_uid: otherUid.value,
  }
  showDyLoading.value = true
  const res = await articleLstApi(p)
  if (res.data.length == 0) {
    finishedDy.value = true
    showDyLoading.value = false
  } else {
    if (res.data && Array.isArray(res.data.list.data)) {
      showDyLoading.value = false
      last_page.value = res.data.list.last_page
      dynamicList.value.push(
        ...res.data.list.data.map((item) => ({
          ...item,
          content_type: isDtOrKp.value == 'kp' ? 'kp' : 'dt',
        })),
      )
    }
  }
}
async function gethomepagePopular() {
  const userStore = useMemberStore()
  const system = useSystemStore()

  if (finishedDy.value) return
  // #ifdef H5
  equipment.value = 'h5'
  // #endif
  let p = {
    uid: dynamicParams.value.uid,
    equipment: userStore?.userInfo?.user?.equipment || 'h5',
    limit: dynamicParams.value.limit,
    page: dynamicParams.value.page,
    long: system.location.longitude || '',
    lat: system.location.latitude || '',
  }
  showDyLoading.value = true
  const res = await gethomepagePopularApi(p)
  if (res.data.length == 0) {
    finishedDy.value = true
    showDyLoading.value = false
  } else {
    if (res.data && Array.isArray(res.data.data)) {
      showDyLoading.value = false
      dynamicList.value.push(...res.data.data)
    }
  }
}
const likeList = ref([])

// 获取用户标签
async function getUserIdentityTage() {
  const userStore = useMemberStore()

  const res: any = await getUserIdentityTageApi({
    equipment: userStore?.userInfo?.user?.equipment || 'h5',
    user_id: otherUid.value || uid.value,
  })
  tagInfo.value = res.data
}
function close() {
  fenShow.value = false
  isShowLike.value = false
}
/**
 * 更新动态列表
 */
let zanDy = 0

function updateListDy(row, i, key) {
  const c = current_tab.value
  if (key == 'is_follow') {
    dynamicList.value.forEach((e) => {
      if (e.uid == row.uid) {
        console.log
        e.is_follow = e.is_follow == 0 ? 1 : 0
      }
    })
  } else if (key !== 'is_like') {
    return (dynamicList.value[i][key] = dynamicList.value[i][key] == 0 ? 1 : 0)
  } else if (key == 'is_like' && zanDy != 0) {
    dynamicList.value[i].zan_number--
    dynamicList.value[i][key] = 0
    zanDy = 0
  } else {
    zanDy = 1
    dynamicList.value[i].zan_number++
    dynamicList.value[i][key] = 1
  }
}
/**
 * 更新点赞列表
 */
let zan = 0

function updateList(row, i, key) {
  //   console.log(row)
  console.log('key', key)
  // const uid = row.uid ? row.uid : row.user_id
  const c = current_tab.value
  console.log('c', c)

  if (key == 'is_follow') {
    likeList.value.forEach((e) => {
      console.log('e', e)

      if (e.uid == row.uid) {
        console.log
        e.is_follow = e.is_follow == 0 ? 1 : 0
      }
    })
  } else if (key !== 'is_like') {
    return (likeList.value[i][key] = likeList.value[i][key] == 0 ? 1 : 0)
  } else if (key == 'is_like' && zan != 0) {
    likeList.value[i].zan_number--
    likeList.value[i][key] = 0
    zan = 0
  } else {
    zan = 1
    likeList.value[i].zan_number++
    likeList.value[i][key] = 1
  }
}
function toReport() {
  fenShow.value = false

  uni.navigateTo({
    url: '/pageT/report?id=' + detail.value?.id + '&type=8',
  })
}
function gotoDetail(row) {
  return
  // form=1为动态，2为科普
}

// 切换tab
function tabClick(row: any) {
  current_tab.value = row.index
  dynamicList.value = []
  likeList.value = []
  switch (row.index) {
    case 0: {
      finishedDy.value = false
      dynamicParams.value.page = 1
      getUserHomepage()
      break
    }
    case 1: {
      break
    }
  }
}
function toBack() {
  uni.navigateBack({
    delta: 1,
  })
}
// 相机权限
const authpup = ref(null)
function openAuth() {
  nextTick(() => {
    authpup.value.open()
  })
}
// 换封面
function changeAuth() {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: async (e) => {
      // tempFilePath可以作为img标签的src属性显示图片
      const url = await uploadApi(e.tempFilePaths[0])
      const res = await editUserApi({
        background: url,
      })
      if (res.message === '编辑成功~') {
      }
      showToast(res.message)
    },
  })
}
const isShowLike = ref(false)
// 打开分享
function toDetail() {
  if (!store.token) {
    nextTick(() => {
      login.value.open()
    })
  }
  if (store.token) {
    let item = {}
    if (userInfo.value.uid == store.userInfo.uid) {
      showLh.value = false
      item = {
        imageUrl: userInfo.value.avatar,
        title: `分享${userInfo.value.nickname}的个人主页`,
        summary: userInfo.value.autograph,
        path: `pages-users/my-page/index?uid=${store.userInfo.uid}`,
        uid: userInfo.value.uid,
        id: userInfo.value.uid,
      }
    } else {
      showLh.value = true
      item = {
        title: `分享${userInfo.value?.nickname}的个人主页`,
        summary: `${userInfo.value?.autograph}` || '这个人超有意思，快来关注吧',
        imageUrl: userInfo.value.avatar,
        path: `pages-users/my-page/index?uid=${userInfo.value.uid}`,
        uid: userInfo.value.uid,
        id: userInfo.value.uid,
      }
    }
    otherType.value = true
    shareRef.value.open(item)
  }
}
onReachBottom(() => {
  if (current_tab.value == 0 && dynamicParams.value.page < last_page.value) {
    dynamicParams.value.page++
    getUserHomepage()
  }
})

function addListener() {
  uni.$on('social', () => {
    getUserHomepage()
  })
  uni.$on('followUser', (row) => {
    getUserSpace()
  })
  uni.$on('update_num', (row) => {
    const index = dynamicList.value.findIndex((item) => item.id == row.id)
    if (index != -1) {
      dynamicList.value[index].is_like = row.is_like
      dynamicList.value[index].is_collect = row.is_collect
      dynamicList.value[index].zan_number = row.zan_number
      dynamicList.value[index].comment_number = row.comment_number
    }
  })
}

const handleTabs = ({ index }: any) => {
  current.value = index
}
onReady(() => {
  getSystemInfo()
  getDocumentInfo()
})
onPageScroll((e) => {
  onPageScrollEvent(e)
})
/**
 * 获取系统信息
 */
const statusHeight = ref(0)

function getSystemInfo() {
  uni.getSystemInfo({
    success: (e) => {
      statusHeight.value = e.statusBarHeight * 2
    },
  })
}
/**
 * 页面滚动
 */
const isSrollTop = ref()
function onPageScrollEvent(e) {
  const t = Math.floor(e.scrollTop) * 2
  isSrollTop.value = Math.floor(e.scrollTop) * 2
}
// 滚动高度
const navBarScrollTop = ref()
// tabs高度
const contentTabHeight = ref()
// 获取高度
function getDocumentInfo() {
  const query = uni.createSelectorQuery()
  query
    ?.select('.week-tabsb')
    ?.boundingClientRect((data: any) => {
      contentTabHeight.value = Math.floor(data?.height) * 2
      navBarScrollTop.value = Math.floor(data?.top) * 2
    })
    .exec()
}
</script>

<style scoped lang="scss">
.pages {
  .h_header {
    min-height: 447rpx;
    // background: url('@/static/my/edit-form-header-bg.png') center center;
    background-size: 100% 100%;

    .header_top {
      padding-top: 22rpx;
      display: flex;
      align-items: center;

      .left {
        width: 14rpx;
        height: 27rpx;
        margin-left: 31rpx;

        .head_img {
          width: 14rpx;
          height: 27rpx;
        }
      }

      .right_changeImg {
        margin-left: 100rpx;

        view {
          margin-top: 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
        }
      }

      .right_share {
        margin-left: 43rpx;

        view {
          margin-top: 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
        }
      }

      .user {
        margin-left: 258rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 36rpx;
        color: #ffffff;
      }
    }

    .head_title {
      padding: 24rpx 0;
      font-size: 34rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 40rpx;
      text-align: center;
      float: left;
      width: 598rpx;
    }
  }

  .card {
    margin-top: -400rpx;
    min-height: 354rpx;

    .shopwindow {
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;

      image {
        width: 70rpx;
        height: 70rpx;
        background: #eee;
        border-radius: 6rpx;
        margin-right: 10rpx;
      }

      .right {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #000;
        }

        .num {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
    }

    .header {
      height: 114rpx;

      image {
        width: 114rpx;
        height: 114rpx;
      }

      .btn-sure {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 146rpx;
        height: 45rpx;
        background: #ffb300;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
      }

      .btn-edit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180rpx;
        height: 55rpx;
        background: #0074fc;
        border-radius: 38rpx 38rpx 38rpx 38rpx;
        opacity: 1;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }

      .middle_tag {
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        // display: flex;
        // align-items: center;
      }

      .name {
        font-size: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #ffffff;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

    .sign {
      .inputurl {
        width: 32rpx;
        height: 32rpx;

        image {
          width: 32rpx;
        }
      }

      .autograph {
        max-width: 360rpx;
        margin-right: 8rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .l-h-1 {
      line-height: 1;
    }
  }

  .none {
    text-align: center;
    padding-top: 200rpx;

    image {
      width: 347rpx;
      height: 190rpx;
    }

    .none_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #ababab;
      line-height: 36rpx;
    }

    .none_btn {
      width: 241rpx;
      height: 69rpx;
      background: #ffb300;
      border-radius: 43rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 69rpx;
      text-align: center;
      margin: 80rpx auto;
    }
  }

  .week-tabsb {
    width: 100%;
    padding-top: 17rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    position: sticky;
    z-index: 99;
    .tabs-container {
      display: flex;
      justify-content: left;
      align-items: center;
      width: 100%;
      flex-direction: inherit;
    }
    // ::v-deep .u-tabs__wrapper__nav__item {
    //   width: 128rpx;
    //   height: 79rpx;
    //   padding: 0 10rpx;
    //   border-radius: 50%;
    //   display: flex;
    //   justify-content: inherit;

    //   // .u-tabs__wrapper__nav__item__text {
    //   //   display: flex;
    //   //   padding: 0 10rpx;
    //   //   height: 79rpx;
    //   //   border-radius: 10rpx;
    //   //   align-items: center;
    //   //   justify-content: center;
    //   //   font-size: 28rpx;
    //   //   text-align: center;
    //   // }
    // }
  }

  .list-content {
    width: 702rpx;

    .content-1 {
      width: 702rpx;
      margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        width: 340rpx;
        height: 337rpx;
        background: #ffffff;
        border-radius: 16rpx;
        padding: 11rpx;
        opacity: 1;
        margin-bottom: 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 15rpx;
        overflow: hidden;

        & > image {
          width: 316rpx;
          height: 148rpx;
          background: #eee;
          border-radius: 8rpx;
        }

        .title {
          flex: 1;
          padding-top: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #000000;
        }

        .info {
          width: 100%;
          height: 35rpx;
          display: flex;
          align-items: center;

          .left {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;

            image {
              width: 35rpx;
              height: 35rpx;
              border-radius: 50%;
              background-color: #eee;
              margin-right: 10rpx;
            }

            .name {
              flex: 1;
              font-size: 26rpx;
              font-weight: 500;
              color: #000000;
              line-height: 1;
            }
          }

          .right {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .num {
              font-size: 24rpx;
              font-weight: 500;
              color: #666666;
            }
          }
        }
      }
    }

    .content-2 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 341rpx;
        height: 377rpx;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 20rpx;
        margin-top: 20rpx;
        overflow: hidden;

        image {
          width: 341rpx;
          height: 196rpx;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          opacity: 1;
        }

        .title {
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0 22rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }

        .info {
          width: 100%;
          height: 35rpx;
          padding-left: 22rpx;
          display: flex;
          align-items: center;

          image {
            width: 35rpx;
            height: 35rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          .name {
            font-size: 20rpx;
            font-weight: 400;
            color: #333333;
            margin-right: 12rpx;
          }

          .hospital {
            font-size: 20rpx;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }

    & > :nth-child(2n + 1) {
      margin-right: 20rpx;
    }

    .content-3 {
      width: 100%;
      display: flex;
      flex-direction: column;

      .item {
        width: 702rpx;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20rpx;
        margin-top: 20rpx;

        .info {
          width: 100%;
          height: 70rpx;
          display: flex;
          align-items: center;

          image {
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
            margin-right: 20rpx;
            background-color: #eee;
          }

          .name {
            font-size: 28rpx;
            font-weight: 500;
            color: #999999;
          }
        }

        .content {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          margin: 20rpx 0;
        }

        .images {
          display: flex;
          flex-wrap: nowrap;

          image {
            width: 207rpx;
            height: 186rpx;
            background: #d9d9d9;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            opacity: 1;
            margin-right: 20rpx;
          }
        }
      }
    }

    .content-4 {
      width: 100%;
      display: flex;
      flex-direction: column;

      .item {
        width: 702rpx;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20rpx;
        margin-top: 20rpx;

        .info {
          width: 100%;
          height: 70rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
            margin-right: 20rpx;
            background-color: #eee;
          }

          .name {
            font-size: 28rpx;
            font-weight: 500;
            color: #999999;
          }

          .title {
            font-size: 28rpx;
            font-weight: 500;
            color: #999999;
            flex: 1;
            padding-left: 10rpx;
          }
        }

        .content {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          margin: 20rpx 0;
        }

        .images {
          display: flex;
          flex-wrap: nowrap;

          image {
            width: 207rpx;
            height: 186rpx;
            background: #d9d9d9;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            opacity: 1;
            margin-right: 20rpx;
          }
        }

        .footer {
          width: 100%;
          height: 36%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 26rpx;

          .footer_item {
            display: flex;
            align-items: center;

            .icon_1 {
              width: 26rpx;
              height: 26rpx;
            }

            .icon_3 {
              width: 25rpx;
              height: 24rpx;
            }

            text {
              margin-left: 15rpx;
              font-weight: 500;
              font-size: 26rpx;
              color: #333333;
            }
          }
        }
      }

      .zan-text {
        color: #a9a9a9;
        text-align: center;
        padding: 12rpx 0;
        font-size: 23rpx;
      }
    }
  }
}

.fen_box_title {
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 90rpx;
  height: 90rpx;
}

.fen_box {
  width: 100%;
  border-radius: 10rpx 10rpx 0 0;
  padding: 0 24rpx 24rpx;

  .fen_box_cen {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    padding-top: 20rpx;

    .lh_box_cen_l {
      width: 216rpx;
      padding: 10rpx 0 15rpx;
      background: #ffffff;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      text-align: center;
      margin: 10rpx 20rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;

      image {
        width: 75rpx;
        height: 75rpx;
        display: block;
        margin: 0 auto;
      }
    }

    .fen_box_cen_l {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 150rpx;
      margin: 0;
      line-height: 1;
      background-color: transparent;

      .fen_box_cen_l_img {
        width: 100rpx !important;
        height: 100rpx !important;
        border-radius: 50%;
      }

      .fen_box_cen_l_te {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 80rpx;
      }
    }
  }
}

.btn-sure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130rpx;
  height: 55rpx;
  // background: #0074fc;
  background: #ffb300;
  border-radius: 38rpx 38rpx 38rpx 38rpx;
  opacity: 1;
  font-size: 24rpx;
  font-weight: 500;
  color: #ffffff;
}

.delPopup {
  width: 562rpx;
  height: 256rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 46rpx 70rpx;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;

  .delText {
    color: #999999;
    font-size: 28rpx;
    margin-bottom: 50rpx;
  }

  .btn {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .btn-cancle {
      width: 163rpx;
      height: 57rpx;
      background: #ffffff;
      border-radius: 29rpx;
      color: #ffb300;
      border: 1px solid #ffb300;
      text-align: center;
      line-height: 57rpx;
    }

    .btn-confirm {
      width: 163rpx;
      height: 57rpx;
      background: #ffb300;
      border-radius: 29rpx;
      color: #ffffff;
      border: 1px solid #ffb300;
      text-align: center;
      line-height: 57rpx;
    }
  }
}

.fen_box_1 {
  width: 571rpx;
  height: 256rpx;
  background: #ffffff;
  border-radius: 26rpx 26rpx 26rpx 26rpx;
  padding-top: 42rpx;

  .fen_box_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #000000;
  }

  .fen_box-content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    padding: 18rpx 16rpx 36rpx 36rpx;
    text-align: center;
  }

  .fen_box_btn {
    display: flex;
    justify-content: space-around;

    .btn_cancle {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffb300;
      background: #ffffff;
      width: 163rpx;
      height: 58rpx;
      border-radius: 29rpx;
      border: 1px solid #ffb300;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn_sure {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #ffffff;
      background: #ffb300;
      width: 163rpx;
      height: 58rpx;
      border-radius: 29rpx;
      border: 1px solid #ffb300;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.uni-nav-bar-text {
  font-weight: 800 !important;
  font-size: 36rpx !important;
}
</style>
